<template>
  <div>
      <h1>动态组件 页面</h1>
      <p @click="change($event)">
        <span @click="fun('shou')">首页</span>
        <span @click="fun('wode')">我的</span>
      </p>
      <keep-alive>
          <component :is="con"></component>
      </keep-alive>
  </div>
</template>

<script>
import shou from './shou.vue'
import wode from './wode.vue'

export default {
    components:{
        shou,wode
    },
    data(){
        return {
            con:'wode'
        }
    },
    methods:{
        fun(obj){
            this.con = obj
        },
        change(obj) {
          obj.target.parentNode.childNodes.forEach((item)=>{
            item.style.background='pink'
          })
          obj.target.style.background='green'
        }
    }
}
</script>

<style scoped>
h1 {
  margin: 0.10rem 0.20rem;
}
p {
  display: flex;
  justify-content: space-around;
  background: pink;
}
p > span {
  padding: 0.10rem 0.40rem;
}
</style>